<template>
	<view class="my-work-order">
		<div :style="{
				height:`${statusBarHeight}px`,
				background:'#2f9aff'
			}"></div>
		<view :style="{height: `${topHeight}px`,paddingLeft:`${pagePadding}px`,paddingRight:`${pagePadding}px`}">
			<view class="personal-title">
				<i class="clearIcon" @click="goBack"></i>
				<text>我的工单</text>
			</view>
		</view>
		<view class="tabBox" :style="{
				height:`${tabHeight}px`
			}">
			<u-tabs class="tabItem" :scrollable="false" :list="tabs" :activeStyle="{ color: 'rgb(1,112,106)' }"
				:nactiveStyle="{ color: '#555555' }" lineColor="rgb(1,112,106)" @click="tabsClick"></u-tabs>
			<view class="tag-list  disBetween">
				<u-tag v-for="item in tagList" :text="item.text" shape="circle" class="tagItem"
					:bgColor="curTag === item.id ? 'rgb(1,112,106)' : '#FFFFFF'"
					:color="curTag === item.id ? '#fff' : '#555555'"
					:borderColor="curTag === item.id ? 'rgb(1,112,106)' : '#FFFFFF'" @click="curTag = item.id"></u-tag>
			</view>
		</view>
		<scroll-view scroll-y class="profile-container" :style="{
				height:`calc(100% - (${topHeight}px + ${tabHeight}px + ${statusBarHeight}px))`
			}" refresher-background="transparent" lower-threshold="20" @scrolltolower="scrolltolower"
			v-if="dataList && dataList.length>0">
			<view class="worker-item boxShaw" v-for="(item,inx) in dataList" :key="inx">
				<view class="worker-content">
					<image src="/static/images/worker/img.png" class="worker-logo"></image>
					<view class="worker-info">
						<view class="worker-title">
							南京钢铁有限公司
						</view>
						<view class="desc-list">
							<view class="desc">
								工单编号：53185
							</view>
							<view class="desc">
								工单编号：53185
							</view>
							<view class="desc">
								工单编号：53185
							</view>
							<view class="desc">
								工单编号：53185
							</view>
						</view>

					</view>
				</view>
				<view class="worker-btn">
					<image src="/static/images/worker/ic_xiangqing.png" class="xiangqing"></image>
					<image src="/static/images/worker/worker.png" class="worker-set"></image>
					<view class="jiedan">
						接单
					</view>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const pagePadding = ref(0);
	const capsulePadding = ref(0);
	const tabHeight = ref(0);
	const contHeight = ref(0); //内容高度
	const tabs = ref([{
		name: '全部',
	}, {
		name: '巡查',
	}, {
		name: '抢修'
	}, {
		name: '特殊'
	}])

	const curTag = ref('0')
	const tagList = ref([{
			id: '0',
			text: "全部"
		},
		{
			id: '1',
			text: "待处理"
		},
		{
			id: '2',
			text: "已处理"
		},
		{
			id: '3',
			text: "处理中"
		},
		{
			id: '4',
			text: "已终止"
		},
	])
	const dataList = ref([{
			num: 3,
			time: "5月27日",
			title: "官方号消息",
			text: "您有几条最新的资讯消息尚未查看请及时查看"
		},
		{
			num: 5,
			time: "5月27日",
			title: "官方号消息",
			text: "您有几条最新的资讯消息尚未查看请及时查看"
		},
		{
			num: 5,
			time: "5月27日",
			title: "官方号消息",
			text: "您有几条最新的资讯消息尚未查看请及时查看"
		},
		{
			num: 5,
			time: "5月27日",
			title: "官方号消息",
			text: "您有几条最新的资讯消息尚未查看请及时查看"
		},{
			num: 5,
			time: "5月27日",
			title: "官方号消息",
			text: "您有几条最新的资讯消息尚未查看请及时查看"
		},{
			num: 5,
			time: "5月27日",
			title: "官方号消息",
			text: "您有几条最新的资讯消息尚未查看请及时查看"
		},{
			num: 5,
			time: "5月27日",
			title: "官方号消息",
			text: "您有几条最新的资讯消息尚未查看请及时查看"
		},{
			num: 5,
			time: "5月27日",
			title: "官方号消息",
			text: "您有几条最新的资讯消息尚未查看请及时查看"
		},
		{
			num: 5,
			time: "5月27日",
			title: "官方号消息",
			text: "您有几条最新的资讯消息尚未查看请及时查看"
		}
	]);
	const tabsClick = (item) => {
		console.log('item', item)
	}

	// 处理页面跳转
	const goBack = (type) => {
		uni.navigateBack()
	};
	const scrolltolower = () => {
		console.log("到底了")
	};
	// 处理页面跳转
	const handleNavigateTo = (type) => {

	}

	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度

		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2
		capsulePadding.value = res.top - statusBarHeight.value
		tabHeight.value = topHeight.value * 2.5

	});
</script>

<style lang="scss" scoped>
	.my-work-order {
		background: #F2F6F5;
		height: 100vh;
	}

	.personal-title {
		height: 100%;
		font-size: 38rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.clearIcon {
			position: absolute;
			height: 100%;
			width: 60rpx;
			background: url(/static/images/my/ic_fanhui@2x.png)no-repeat center;
			background-size: 35%;
			left: 0;
			top: 0;
		}
	}

	.tabBox {
		.tabItem {
			background: #ffffff;
			height: 50%;
		}

		.tag-list {
			width: 90%;
			height: 50%;
			margin: 0 auto;
		}
	}

	.profile-container {
		background-color: #f5f5f5;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		.worker-item {
			background-color: #ffffff;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			border-radius: 8px;
			width: 90%;
			margin: 0 auto 20rpx;
			.worker-logo {
				width: 140rpx;
				height: 110rpx;
				margin-right: 20rpx;
			}

			.xiangqing {
				width: 40rpx;
				height: 10rpx;
				margin-bottom: 8rpx;
			}

			.worker-set {
				width: 64rpx;
				height: 60rpx;
				margin-bottom: 8rpx;
				margin-right: 10rpx;
			}

			.zhiding {
				width: 24rpx;
				height: 22rpx;
			}

			.worker-content {
				display: flex;
				align-items: flex-start;
			}

			.worker-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #555555;
				margin-bottom: 10rpx;
			}

			.desc-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: 4rpx;

				.desc {
					width: calc(50% - 2rpx);
					font-size: 22rpx;
					color: rgb(117, 117, 117);
				}
			}

			.worker-btn {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.jiedan {
					font-size: 28rpx;
					color: rgb(1, 112, 106);
					padding-right: 8rpx;
					font-weight: bold;
				}
			}

		}
	}

	.disBetween {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.disCenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.boxShaw {
		box-shadow: #d4d3d3  0 0 20rpx;
	}
</style>